import * as  React from 'react';
import {forwardRef, useCallback, useEffect, useRef, useState} from 'react';
import {Button} from 'react-iaux'
import './HookTest.less'
import PageLayout from "@/react/components/page-layout";

const ForwardTest = forwardRef<HTMLDivElement>((props, ref) => {
  return (
    <div ref={ref}>
      Hello ForwardTest
    </div>
  )
});

function useAccess(initialValue: number) {

}

const HookTest: React.FunctionComponent<{}> = (props) => {
  const [access, setAccess] = useState<number>(0);
  const testRef = useRef<any>();
  const handleGrantClick = () => {
    setAccess(1);
  }
  const handleRevokeClick = useCallback(() => {
    setAccess(0);
    console.log(testRef)
  }, [])

  useEffect(() => {
    console.log('DidMount')
  }, [])
  useEffect(() => {
    console.log('Did Update')
  }, [access])
  useEffect(() => {
    console.log('Did Did')
  })

  return (
    <PageLayout>
      <div className='content-wrapper'>
        {
          access ? (
            <div>Hello Test Hook</div>
          ) : (
            <div>
              Access Denied!
            </div>
          )
        }
      </div>
      <div>
        <ForwardTest ref={testRef} />
      </div>
      <div className='hook-btn-line'>
        <Button onClick={handleRevokeClick} status='pure'>REVOKE</Button>
        <Button onClick={handleGrantClick}>GRANT</Button>
      </div>
      <div>
      </div>
    </PageLayout>
  )
}

export default HookTest;


class Page extends React.Component {


  handleClick = () => {

  }

  renderLeft() {
    return null;
  }

  renderRight() {
    return null;
  }

  renderList() {
    return (
      <div>
        {
          [].map(i => {
            return (
              <div onClick={this.handleClick}>
                {i}
              </div>
            )
          })
        }
      </div>
    );
  }

  renderDetailPanel() {
    return null;
  }

  render() {
    return (
      <div>
        <div>{this.renderLeft()}</div>
        <div>{this.renderRight()}</div>
      </div>
    )
  }
}
